<template>
  <view class="search-container">
    <view class="search-top">
      <view class="search-back">
        <uni-icons class="search-icon" type="back" size="24" @click="goback"></uni-icons>
      </view>
      <uni-search-bar class="search-input" radius="100" placeholder="请输入关键词" clearButton="none" cancelButton="none" @confirm="iconClick" />
      <view class="search-btn" @click="toSearch">搜索</view>
    </view>

    <view class="hot-words-section section">
      <view class="hot-word-title title">热门搜索</view>
      <view class="host-words-container container">
        <text class="host-word container-item" v-for="(item, i) in hostWords" :key="i">{{item}}</text>
      </view>
    </view>

    <view class="section">
      <view class="title">搜索历史</view>
      <view class="container">
        <text class="container-item" v-for="(item, i) in historyWords" :key="i">abc</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'search',
  data() {
    return {
      value: "",
      hostWords: [],
      historyWords: [],
    }
  },
  onShow() {

  },
  methods: {
    iconClick:()=>{
      console.log('a')
      this.toSearch()
    },
    toSearch: ()=>{

    },
    goback: ()=>{
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  width: 750rpx;
  .search-top {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10rpx;
    /* #ifdef MP_WEIXIN */
    margin-bottom: 35rpx;
    /* #endif */
    .search-back {
      width: 10%;
      height: 80rpx;
      /* #ifdef MP_WEIXIN */
      display: none;
      /* #endif */
      text-align: center;
      .search-icon {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 24rpx;
      }
    }
    .search-input {
      width: 70%;
      /* #ifdef MP_WEIXIN */
      width: 100%;
      /* #endif */
      height: 80rpx;
    }
    .search-btn {
      width: 20%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 34rpx;
      /* #ifdef MP_WEIXIN */
      display: none;
      /* #endif */
      font-weight: bolder;
    }
  }
  .section {
    width: 750rpx;
    padding: 0 16rpx;
    .title {
      width: 750rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 35rpx;
      font-weight: bolder;
    }
    .container {
      width: 750rpx;
      margin: 16rpx 0;
      .container-item {
        padding: 10rpx 16rpx;
        margin: 10rpx 16rpx 0 0;
        // float: left;
        display: inline-block;
        height: 28rpx;
        line-height: 28rpx;
        border-radius: 10rpx;
        border: 1px solid #e9e0e0;
      }
    }
  }
}
</style>